import { Component, OnInit } from '@angular/core';
import { BaseFieldComponent } from '../base-field/base-field.component';
import { EChartsOption } from 'echarts';
import { PermitConfig } from '../../../models';

@Component({
  selector: 'zepride-chart-histogram',
  templateUrl: './chart-histogram.component.html',
  styleUrls: ['./chart-histogram.component.less']
})
export class ChartHistogramComponent extends BaseFieldComponent implements OnInit {

  option: EChartsOption = {};
  xdirection: any;
  ydirection: any;
  visible = false;
  width = '400px';
  height = '400px';
  permitConfig: PermitConfig[] = [
    { mode: 'query', permitId: '查看', permitName: '', authObjectId: '' }
  ];

  ngOnInit(): void {
    this.initValue();
    this.initOption();
  }

  initOption() {
    this.option = {
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: [
          '数据1',
          '数据2',
          '数据3',
        ],
        left: '10%',
        top: '5%',
        itemWidth: 13,
        itemGap: 16,
        textStyle: {
          color: '#606266'
        }

      },
      xAxis: [
        this.xdirection
      ],
      yAxis: [
        this.ydirection
      ],
      series: [
        {
          name: '数据1',
          type: 'bar',

          data: [300, 350, 480, 100, 125, 400, 130, 480, 125, 625],
          itemStyle: {
            color: '#4F6DED'
          }
        },
        {
          name: '数据2',
          type: 'bar',
          data: [600, 260, 375, 370, 180, 380, 370, 20, 260, 550],
          itemStyle: {
            color: '#49CFA8'
          }
        },
        {
          name: '数据3',
          type: 'line',
          data: [650, 580, 625, 520, 450, 550, 510, 625, 575, 875],
          lineStyle: {
            color: 'rgba(238, 249, 13, 1)',
          },
          itemStyle: {
            borderColor: 'rgba(238, 249, 13, 1)'
          }
        },

      ]
    };
  }
  initValue() {
    if (!this.componentData.extends || !this.componentData.extends.direction) {
      this.xdirection = {
        type: 'category',
        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
        axisPointer: {
          type: 'shadow'
        },
        axisTick: {
          show: true,
          alignWithLabel: true // 刻度居中
        },
        splitLine: {
          show: true // 显示网格
        }
      },
        this.ydirection = {
          type: 'value',
          min: 0,
          max: 1000,
          interval: 250,
          axisLabel: {
            formatter: '{value} '
          }
        };
    }
    if (this.componentData.extends && this.componentData.extends.direction && this.componentData.extends.direction == 'lengthways') {
      this.xdirection = {
        type: 'category',
        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
        axisPointer: {
          type: 'shadow'
        },
        axisTick: {
          show: true,
          alignWithLabel: true // 刻度居中
        },
        splitLine: {
          show: true // 显示网格
        }
      },
        this.ydirection = {
          type: 'value',
          min: 0,
          max: 1000,
          interval: 250,
          axisLabel: {
            formatter: '{value} '
          }
        };
    } else if (this.componentData.extends && this.componentData.extends.direction && this.componentData.extends.direction === 'cross') {
      this.ydirection = {
        type: 'category',
        data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
        axisPointer: {
          type: 'shadow'
        },
        axisTick: {
          show: true,
          alignWithLabel: true // 刻度居中
        },
        splitLine: {
          show: true // 显示网格
        }
      },
        this.xdirection = {
          type: 'value',
          min: 0,
          max: 1000,
          interval: 250,
          axisLabel: {
            formatter: '{value} '
          }
        };
    }

    if (this.componentData.extends && this.componentData.extends.width) {
      if (this.componentData.extends.width === 'half') {
        this.width = '500px';
        this.height = '400px';
      } else if (this.componentData.extends.width === 'full') {
        this.width = '1100px';
        this.height = '500px';
      }
    }
  }
  open() {
    this.visible = !this.visible;
  }

  close() {
    this.visible = !this.visible;
  }

}
